<template>
    <div>
        <Table ref="table" :columns='columns' :loading='loading' :data='data' size="small">
            <!-- call -->
            <template slot-scope="{ row }" slot="callState">
                <Badge v-if="row.is_call_str === '未接听'" status="warning" text="未接听" />
                <Badge v-if="row.is_call_str === '已接听'" status="success" text="已接听" />
            </template>
             <!-- call -->
             <!-- grap -->
            <template slot-scope="{ row }" slot="grapmobile">
                <span v-if="row.mobile !== ''">{{ row.mobile }}</span>
                <Divider type="vertical" v-if="row.mobile && row.wechat_num" />
                <span v-if="row.wechat_num !== ''">{{ row.wechat_num }}</span>
            </template>
            <template slot-scope="{ row }" slot="grapdialog_mode">
                <span>
                    {{ row.dialog_mode === 'E聊' ? row.dialog_mode + (row.user_real_name ? '(' : '') + row.user_real_name
                    +(row.user_real_name?')': '') :row.dialog_mode}}
                </span>
            </template>
             <!-- grap -->
             <!-- wechat -->
            <template slot-scope="{ row }" slot="wechattags">
                <tag v-for="item in row.remark_tags" :key="item">{{ item }}</tag>
            </template>
            <template slot-scope="{ row }" slot="wechatsource_type">
                <span v-if="+row.source_type<10000 && +row.source_type !== 0">主动</span>
                <span v-if="+row.source_type>10000">被动</span>
            </template>
             <!-- wechat -->

             <!-- call -->
            <template slot-scope="{ row }" slot="callcalled_tel">
                <a v-if="+row.clue_status_id !== 8" @click="handleContactClue(row)">{{ row.called_tel }}</a>
            </template>
            <template slot-scope="{ row }" slot="calloperation">
                <a v-if="+row.clue_status_id !== 8" @click="handleContactClue(row)">联系</a>
                <span v-else class="person">{{ row.realname }}</span>
                <Divider type="vertical"></Divider>
                <a @click="handleSound(row)">听录音</a>
                <Divider type="vertical"></Divider>
                <a v-if="row.repeat_type === '1'" @click="repeatData('call',row)">重复</a>
            </template>
             <!-- call -->

             <!-- grap -->
             <template slot-scope="{ row }" slot="grapinfo">
                <a @click="handleContactClue(row)">{{ row.info }}</a>
            </template>
            <template slot-scope="{ row }" slot="grapoperation">
                <a @click="handleContactClue(row)" v-if="+row.type !== 4">联系</a>
                <span class="person" v-else>{{ row.contact_name }}</span>
                <Divider type="vertical" v-if="row.contact_name||row.repeat_type === '1'" />
                <a v-if="row.repeat_type === '1'" @click="repeatData('grap',row)">重复</a>
            </template>
             <!-- grap -->

            <!-- wechat -->
             <template slot="wechatwechat" slot-scope="{ row }">
                <a @click="openedits(row)">
                    <Avatar shape="square" size="large" class="ivu-fl" :src="row.avatar" />
                    <span class="ivu-ml-8">{{ row.nickname }}</span>
                    <br />
                    <span class="ivu-ml-8 ivu-weixin">微信号：{{ row.friend_wechatno }}</span>
                </a>
            </template>
            <template slot-scope="{ row }" slot="wechatoperation">
                <span v-if="+row.clue_status === 8" class="person">{{ row.realname }}</span>
                <a href="javaScript:;" v-else @click="openedits(row)">联系</a>
            </template>
            <!-- wechat -->

            <!-- entry -->
             <template slot-scope="{ row }" slot="entryinfo">
                <a @click="handleContactClue(row)">{{ row.info }}</a>
            </template>
            <template slot-scope="{ row }" slot="entryoperation">
                <span v-if="row.type === 4">{{ row.contact_name }}</span>
                <span v-else>
                    <a @click="handleContactClue(row)">联系</a>
                    <Divider type="vertical" />
                    <a @click="handleedit(row)">编辑</a>
                </span>
                <Divider type="vertical" v-if="row.repeat_type === '1'" />
                <a v-if="row.repeat_type === '1'" @click="repeatData('entry',row)">重复</a>
                <Divider type="vertical" v-if="row.repeat_user === '1'" />
                <a v-if="row.repeat_user === '1'" @click="repeatuser(row)">患者重复</a>
            </template>
            <!-- entry -->
            <template slot="footer">
                <Page
                    show-total show-elevator
                    show-sizer transfer
                    :total="total"
                    :current.sync="params.page"
                    :page-size="params.pageSize"
                    :page-size-opts="pageOpts"
                    @on-change="changepage"
                    @on-page-size-change="changepageSize"
                    style="text-align: center;"
                />
            </template>
        </Table>
        <Modal title="重复数据" :mask-closable="false" footer-hide :width="80" v-model="repeat">
            <Table :max-height="400" :columns="repeatColumns" :data="repeatList">
                <!-- call -->
                <template slot="callmobile" slot-scope="{ row }">
                    <span v-if="+repeatInfo.repeat_type === 1" :class="
                            row.mobile && row.mobile === repeatInfo.mobile
                                ? 'repeatColor'
                                : null
                        ">
                        {{ row.mobile }}
                    </span>
                    <span v-else>{{ row.mobile }}</span>
                </template>
                <!-- call -->
                <!-- grap -->
                <template slot="grapmobile" slot-scope="{ row }">
                    <span v-if="+repeatInfo.repeat_type === 1 || +repeatInfo.repeat_type === 3" :class="row.mobile && row.mobile === repeatInfo.mobile? 'repeatColor' : null">
                        {{ row.mobile }}
                    </span>
                    <span v-else>{{ row.mobile }}</span>
                </template>
                <template slot="dialog_mode" slot-scope="{ row }">
                    <span>{{ row.dialog_mode}}</span>
                </template>
                <template slot="grapwechat_num" slot-scope="{ row }">
                    <span v-if="
                            +repeatInfo.repeat_type === 2 ||
                                +repeatInfo.repeat_type === 3
                        " :class="
                            row.wechat_num &&
                            row.wechat_num === repeatInfo.wechat_num
                                ? 'repeatColor'
                                : null
                        ">
                        {{ row.wechat_num }}
                    </span>
                    <span v-else>{{ row.wechat_num }}</span>
                </template>
                <!-- grap -->
                <!-- entry -->
                <template slot="user_name" slot-scope="{ row }">
                    <span>{{ row.user_name }}</span>
                    <span>{{ row.gender === "0" ? "未知" : row.gender === "1" ? "男" : "女" }}</span>
                    <span v-if="row.age">{{ row.age }}</span>
                </template>
                <template slot="entrymobile" slot-scope="{ row }">
                    <span v-if="
                            +repeatInfo.repeat_type === 3 ||
                            +repeatInfo.repeat_type === 5 ||
                            +repeatInfo.repeat_type === 6 ||
                            +repeatInfo.repeat_type === 7
                        " :class="
                            row.mobile && row.mobile === repeatInfo.mobile
                                ? 'repeatColor'
                                : null
                        ">
                        {{ row.mobile }}
                    </span>
                    <span v-else>{{ row.mobile }}</span>
                </template>
                <template slot="entrywechat_num" slot-scope="{ row }">
                    <span v-if="
                            +repeatInfo.repeat_type === 2 ||
                            +repeatInfo.repeat_type === 4 ||
                            +repeatInfo.repeat_type === 6 ||
                            +repeatInfo.repeat_type === 7
                        " :class="
                            row.wechat_num &&
                            row.wechat_num === repeatInfo.wechat_num
                                ? 'repeatColor'
                                : null
                        ">
                        {{ row.wechat_num }}
                    </span>
                    <span v-else>{{ row.wechat_num }}</span>
                </template>
                <template slot="dy_num" slot-scope="{ row }">
                    <span
                        v-if=" +repeatInfo.repeat_type === 1 || +repeatInfo.repeat_type === 4 || +repeatInfo.repeat_type === 5 || +repeatInfo.repeat_type === 7 "
                        :class=" row.dy_num && row.dy_num === repeatInfo.dy_num ? 'repeatColor' : null ">
                        {{ row.dy_num }}
                    </span>
                    <span v-else>{{ row.dy_num }}</span>
                </template>
                <!-- entry -->
            </Table>
        </Modal>
        <Modal title="患者重复数据" :mask-closable="false" footer-hide :width="80" v-model="repeatusers">
            <Table :max-height="400" :columns="repeatuserColumns" :data="repeatuserList">
                <template slot="user_name" slot-scope="{ row }">
                    <span class="ivu-mr-8">{{ row.user_name }}</span>
                    <span class="ivu-mr-8">{{ row.gender }}</span>
                    <span v-if="row.age">{{ row.age }}</span>
                </template>
                <template slot="realname" slot-scope="{ row }">
                    <span v-if="+row.patient_data_type === 0">{{ row.realname }}</span>
                </template>
                <template slot="status" slot-scope="{ row }">
                    <Tag v-if="+row.patient_status_id === 1" color="warning">{{ row.patient_status }}</Tag>
                    <Tag v-else-if="+row.patient_status_id === 2" color="primary">{{ row.patient_status }}</Tag>
                    <Tag v-else-if="+row.patient_status_id === 3" color="default">{{ row.patient_status }}</Tag>
                    <Tag v-else-if="+row.patient_status_id === 4" color="success">{{ row.patient_status }}</Tag>
                    <Tag v-else>{{ row.patient_status }}</Tag>
                </template>
            </Table>
        </Modal>
    </div>
</template>
<script>
    import {
        repeatData, //entry
        grapRepeatData,
        repeatCallData,
        clueuserrepeatuser 
    } from "@api/hqapi";
    export default {
        name: 'JG-table',
        props: {
            params: { type: Object },
            data: { type: Array },
            loading: { type: Boolean },
            columns: { type: Array },
            total: { type: [String, Number] },
            butshow: { type: Object },
        },
        data () {
            return {
                pageOpts: [10, 20, 50, 100],
                callColumns: [
                    { title: "设备别名", key: "wechatid", width: 180 },
                    { title: "归属部门", key: "department_name" },
                    { title: "来电号码", slot: "callmobile" },
                    { title: "通话时长", key: "duration_str" },
                    { title: "线索状态", key: "status_name" },
                    { title: "来电时间", key: "call_time" },
                ],
                grapColumns: [
                    { title: "基本信息", slot: "user_name" },
                    { title: "手机号", slot: "grapmobile" },
                    { title: "微信", slot: "grapwechat_num" },
                    { title: "录入人员", key: "realname" },
                    { title: "录入时间", key: "created_at" },
                ],
                entryColumns: [
                    { title: "基本信息", slot: "user_name" },
                    { title: "手机号", slot: "entrymobile" },
                    { title: "微信", slot: "entrywechat_num" },
                    { title: "抖音", slot: "dy_num" },
                    { title: "录入人员", key: "realname" },
                    { title: "录入时间", key: "created_at" },
                ],
                repeatColumns: [],
                repeat: false,
                repeatList: [],
                repeatInfo: {},
                repeatuserColumns: [
                    { title: "基本信息", slot: "user_name"},
                    { title: "状态", slot: "status"},
                    { title: "归属人", slot: "realname"},
                    { title: "创建时间", key: "created_at"},
                ],
                repeatusers: false,
                repeatuserList: [],
            }
        },
        methods: {
            /* @函数功能: 分页 */
            changepage (e) {
                this.params.page = e;
                this.$emit('askData');
            },
            /* @函数功能: 每页数量 */
            changepageSize (e) {
                this.params.page = 1;
                this.params.pageSize = e;
                this.$emit('askData');
            },
            // 听录音
            handleSound(row) {
                this.$emit('handleSound', row)
            },
            // 联系
            handleContactClue(row) {
                this.$emit('handleContactClue', row)
            },
            // 重复
            repeatData(name, row) {
                if (name == 'call') {
                    this.repeatColumns = this.callColumns
                    repeatCallData({id:row.id}).then(res=>{ this.repeatDatas(res) })
                }
                else if (name == 'grap') {
                    this.repeatColumns = this.grapColumns
                    grapRepeatData({id:row.id}).then(res=>{ this.repeatDatas(res) })
                }
                else if (name == 'entry') {
                    this.repeatColumns = this.entryColumns
                    repeatData({id:row.id}).then(res=>{ this.repeatDatas(res) })
                }
            },
            repeatDatas(res) {
                this.repeatInfo = res.info
                this.repeatList = res.list
                this.repeat = true
            },
            // 患者重复
            repeatuser(row) {
                clueuserrepeatuser({ id: row.id }).then((res) => {
                    this.repeatuserList = res
                    this.repeatusers = true
                });
            },
            // 录入编辑
            handleedit(row) {
                this.$emit('handleedit', row.id);
            }
        }
    }
</script>
<style lang="less" scoped>
.repeatColor{
    color: red;
}
</style>
